<template>
<div>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    class="one"
    >

    <el-table-column
      type="selection"
      width="55"
      >
    </el-table-column>
    
    <el-table-column
      v-for="item in tableHead"
      :key="item.lable"
      :prop="item.prop"
      :label="item.lable"
      :show-overflow-tooltip="tooltip"
      width="130px"
      align="center"
      >
          <template slot-scope="scope">
             <div v-if="item.type=='button'" >
                  <el-button type="primary" v-if="item.button.first&&item.button" size="mini" @click="$emit('amends',scope.row)">修改</el-button>
                  <el-button type="danger" v-if="item.button.second&&item.button" size="mini" @click="$emit('delect',scope.row)">删除</el-button>
              </div>
             <div>
               {{scope.row[item.prop]}}
             </div>
             <div v-if="item.type=='img'">
              <el-avatar shape="square" :size="100"  :src="'http://estate.eshareedu.cn/estate2/upload/'+scope.row.photo"></el-avatar>
            </div>
          </template>
          
    </el-table-column>

  </el-table>
</div>
    
  
</template>

<script>
export default {
    props:{
        tableHead:{
            type:Array,
            default:()=>[]
        },
        tableData:{
            type:Array,
            default:()=>[]
        },
        tooltip:{
            type:Boolean,
            default:true
        }
        
    },

    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        // console.log(val);
       this.$emit('handleSelectionChange',val)
      }
    }
  }
</script>

<style>
    .one{
      margin-left: 50px;
      margin-top: 20px;
    }
</style>